<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/css/admin.css" media="all">
    <style>
        /* 头部导航栏 */
        .layui-card-body {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
        }
        .layui-nav {
            display: flex;
            justify-content: center; /* 使左右两侧导航项分开 */
            width: 100%; /* 确保占据整个宽度 */
            padding-right: 100px; /* 添加右边距 */
        }
        .left-nav{
            display: flex;
            flex-wrap: nowrap; /* 防止换行 */
            justify-content: center;
        }
        .right-nav {
            display: flex;
            flex-wrap: nowrap; /* 防止换行 */
            justify-content: flex-end;
        }
        .left-nav .layui-nav-item,
        .right-nav .layui-nav-item {
            margin-right: 5px; /* 减小导航项之间的间距 */
        }
        .left-nav .layui-nav-item:last-child,
        .right-nav .layui-nav-item:last-child {
            margin-right: 0; /* 最后一个导航项不需要间距 */
        }

        /* 清除默认的 padding */
        .left-nav .layui-nav-item a,
        .right-nav .layui-nav-item a {
            padding: 0 10px; /* 减小链接周围的间距 */
        }

        /* 设置搜索框的宽度 */
        .search-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .layui-input-wrap {
            background-color: inherit; /* 背景颜色继承自父元素 */
            border: 1px solid #ddd; /* 边框 */
            border-radius: 4px; /* 边框圆角 */
            padding: 0; /* 移除默认padding */
            width: 300px;
        }
        .layui-input {
            background-color: transparent; /* 输入框背景透明 */
            border: none; /* 输入框无边框 */
            padding: 8px 12px; /* 内边距 */
            width: 266px; /* 输入框宽度100% */
            color: inherit; /* 文字颜色继承自父元素 */
        }
        /* Logo 样式 */
        .logo {
            display: flex;
            align-items: center;
            margin-right: auto; /* 将Logo推到左边 */
        }
        .logo img {
            max-height: 60px; /* 限制Logo高度 */
            margin-left: 60px; /* Logo与左侧导航之间的间距 */
        }
        #LAY-component-grid-all {
            width: 1400px; /* 固定宽度 */
            margin: 0 auto; /* 水平居中 */
            background-color: #fff; /* 背景颜色 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
            padding: 20px; /* 内边距 */
        }
        #LAY-component-grid-all .layui-card-body {
            display: flex;
            justify-content: center; /* 水平居中 */
            flex-direction: column; /* 纵向排列 */
            text-align: center; /* 文本居中 */
            height: 300px; /* 卡片内容的高度 */
        }
        /*头条*/
        .layui-col-md7 {
            width: 950px;
            height: 380px;
        }
        .layui-col-md5 {
            width: 450px;
            height: 380px;
        }
        #ID-carousel-demo-image {
            width: 920px;
            height: 360px;
            margin: 0 auto; /* 水平居中 */
        }
        .carousel-image {
            width: 100%; /* 图片宽度 */
            height: 100%; /* 图片高度 */
            object-fit: cover; /* 保持图片比例并覆盖容器 */
        }
        #one{
            width: 100%;
            height: 360px;
            float: right;
            border: 1px solid #cccccc;
        }
        #one_bt {
            width: 100%;
            height: 30px;
            border-bottom: 1px solid #cccccc;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: flex-start; /* 水平靠左 */
        }
        #one_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        .one {
            display: inline-flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            font: bolder 16px '微软雅黑', sans-serif; /* 字体粗细和大小 */
            color: #000000; /* 字体颜色 */
            line-height: 24px; /* 行高与图片高度一致 */
        }
        .one_p {
            display: inline-flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            font: bolder 16px '微软雅黑', sans-serif; /* 字体粗细和大小 */
            color: #000000; /* 字体颜色 */
            margin-left: auto; /* 将“更多”推到最右边 */
            padding-right: 18px; /* 右侧内边距 */
        }
        .one_p a {
            text-decoration: none; /* 移除链接下划线 */
            color: inherit; /* 继承父元素的颜色 */
        }
        #one ul{
            padding-left: 8px;
        }
        #one li a{
            text-indent: 16px;
            font: 16px 微软雅黑;
            color: #333333;
            text-decoration: none;
            float: left;
            height: 25px;

        }
        #one li{
            list-style: none;
            line-height: 50px;
            height: 50px;
        }
        #one li a:hover{
            color: red;
        }
        #one_bt .one_p:hover{
            color:red;
        }
        /*热点*/
        #two {
            width: 100%;
            height: 300px;
            float: right;
            position: relative; /* 使内部绝对定位有效 */
            overflow: hidden; /* 隐藏超出的部分 */
        }
        #two_bt {
            width: 100%;
            height: 30px;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: flex-start; /* 水平靠左 */
            background-color: #f8f8f8; /* 可选：为头条区域添加背景色 */
        }
        #two_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        .headline {
            font-size: 16px;
            font-weight: bold;
            display: -webkit-box; /* 使用 Webkit 的 box 来处理多行文本 */
            -webkit-line-clamp: 1; /* 设置只显示一行 */
            -webkit-box-orient: vertical; /* 盒子的方向为垂直 */
            overflow: hidden; /* 隐藏溢出的文字 */
            text-overflow: ellipsis; /* 在溢出时显示省略号 */
        }
        .image_container {
            position: absolute;
            top: 31px; /* 头部高度 */
            left: 0;
            width: 100%; /* 占满宽度 */
            height: 140px; /* 图片高度 */
            margin-top: 10px;
            overflow: hidden; /* 如果图片尺寸过大，则裁剪掉多余部分 */
        }
        .article_image {
            width: 100%; /* 图片宽度 */
            height: 100%; /* 图片高度 */
            object-fit: cover; /* 保持图片比例并覆盖容器 */
        }
        .article_info {
            position: absolute;
            top: 171px; /* 头部 + 图片高度 */
            left: 0;
            width: 100%; /* 剩余宽度 */
            height: calc(100% - 191px); /* 剩余高度 */
            margin-top: 20px;
        }
        #two_list_title p {
            margin-top: 4px;
            text-align: left;
            font-size: 14px; /* 设置字体大小 */
            font-weight: bold;
            font-family: "华文中宋";
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #two_list_nr a {
            text-align: left;
            margin-top: 5px;
            color: #666;
            line-height: 28px;
            font-size: 13px; /* 设置字体大小 */
            font-family: '宋体', serif; /* 设置字体类型 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #cccccc;
            text-overflow: ellipsis;
        }
        /*失物招领*/
        #third {
            width: 100%;
            height: 300px;
            float: right;
        }
        #third_bt {
            width: 100%;
            height: 30px;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: right; /* 最右边 */
        }
        #third_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        .third_p {
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            font-family: "宋体";
            color: #000000; /* 字体颜色 */
            padding-right: 0px; /* 右侧内边距 */
        }
        .third_list {
            width: 100%;
            height: 280px; /* 设置高度 */
            overflow: hidden; /* 隐藏溢出的内容 */
        }
        .third_list_title {
            margin-bottom: 0px; /* 设置每个标题和简介组之间的间距 */
            margin-top: 10px;
        }
        .third_list_title p {
            text-align: left;
            font-family: "宋体"; /* 简介使用宋体字体 */
            font-size: 15px; /* 标题字体较大 */
            color: #000000; /* 标题颜色 */
            margin-top: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-height: 15px;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .third_list_title a {
            text-align: left;
            display: block; /* 确保链接独占一行 */
            font-family: "宋体"; /* 简介使用宋体字体 */
            font-size: 12px; /* 简介字体较小 */
            line-height: 15px;
            text-decoration: none; /* 移除链接下划线 */
            color: #c0c4cc; /* 简介颜色 */
            margin-top: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .third_list_title a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }


        #four{
            width: 100%;
            height: 300px;
            float: right;
        }
        #four_bt {
            width: 100%;
            height: 30px;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: flex-start; /* 水平靠左 */
        }
        #four_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        .four_p a {
            text-decoration: none; /* 移除链接下划线 */
            color: inherit; /* 继承父元素的颜色 */
        }
        #four img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        #four_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }
        .four_p {
            display: inline-flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            font: bolder 16px '微软雅黑', sans-serif; /* 字体粗细和大小 */
            color: #000000; /* 字体颜色 */
            margin-left: auto; /* 将“更多”推到最右边 */
            padding-right: 18px; /* 右侧内边距 */
        }

        #five{
            width: 100%;
            height: 300px;
            float: right;
        }
        #five_bt {
            width: 100%;
            height: 30px;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: flex-start; /* 水平靠左 */
        }
        #five_bt img {
            width: 24px; /* 限制图片宽度 */
            height: 24px; /* 限制图片高度 */
            margin-right: 10px; /* 图片右侧间距 */
        }


        .list_1 {
            margin-top: 15px;
            display: flex; /* 使用 Flexbox 布局 */
            align-items: flex-start; /* 垂直对齐方式 */
            width: 100%; /* 占满整个容器的宽度 */
            height: 150px; /* 固定高度 */
        }
        /*推荐样式*/
        .image-container {
            width: 230px; /* 图片容器宽度 */
            height: 130px; /* 图片容器高度 */
            margin-right: 20px; /* 图片和内容之间的间距 */
        }
        .article-image {
            width: 100%; /* 图片宽度 */
            height: 100%; /* 图片高度 */
            object-fit: cover; /* 保持图片比例并覆盖容器 */
        }
        .content-container {
            display: flex; /* 使用 Flexbox 布局 */
            flex-direction: column; /* 垂直排列 */
            justify-content: flex-start; /* 垂直对齐方式 */
            flex-grow: 1; /* 内容容器占据剩余空间 */
            max-width: calc(100% - 320px); /* 计算内容容器的最大宽度 */
        }
        .content-container-header{
            width: 800px;
            height: 100px;
        }
        .article-title {
            margin: 0; /* 移除默认的上下外边距 */
            font-size: 18px; /* 标题字体大小 */
            font-weight: bold; /* 标题加粗 */
            font-family: 'SimSun', serif; /* 使用宋体字体 */
            color: #000; /* 标题颜色 */
        }
        .article-summary {
            margin: 10px 0 0; /* 上下外边距 */
            font-size: 14px; /* 简介字体大小 */
            font-family: 'SimSun', serif; /* 使用宋体字体 */
            color: #666; /* 简介颜色 */
            line-height: 1.6; /* 行高 */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 设置只显示三行 */
            -webkit-box-orient: vertical; /* 盒子的方向为垂直 */
            overflow: hidden; /* 隐藏溢出的文字 */
            text-overflow: ellipsis; /* 在溢出时显示省略号 */
            max-height: 100px; /* 设置最大高度 */
        }
        .article-footer1 {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: flex-start; /* 水平两端对齐 */
            align-items: center; /* 垂直居中对齐 */
            margin-top: 10px; /* 与简介之间的间距 */
        }
        .like-button {
            width: 20px; /* 按钮宽度 */
            height: 17px; /* 按钮高度 */
            margin-left: 0px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: none;
            cursor: pointer;
            display: inline-flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: center; /* 水平居中对齐 */
        }
        .dislike-button {
            width: 20px; /* 按钮宽度 */
            height: 17px; /* 按钮高度 */
            margin-left: 20px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: none;
            cursor: pointer;
            display: inline-flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: center; /* 水平居中对齐 */
        }
        .like-button {
            background-image: url('layui/images/dz1.png'); /* 默认点赞图标 */
        }
        .like-button.active {
            background-image: url('layui/images/dz2.png'); /* 激活点赞图标 */
        }
        .dislike-button {
            background-image: url('layui/images/cai1.png'); /* 默认踩图标 */
        }
        .dislike-button.active {
            background-image: url('layui/images/cai2.png'); /* 激活踩图标 */
        }
        .like-count, .dislike-count {
            margin-left: 5px; /* 文本与按钮之间的间距 */
            font-size: 14px; /* 文本字体大小 */
            color: #666; /* 文本颜色 */
            display: inline-block; /* 确保文本与按钮在同一行 */
            line-height: 20px; /* 与按钮高度一致 */
        }
        .author-name {
            margin-left: 20px;
            font-size: 14px; /* 作者名称字体大小 */
            color: #666; /* 作者名称颜色 */
            text-decoration: none; /* 移除链接下划线 */
            color: #000; /* 链接文字颜色 */
        }
        .more{
            width: 20px; /* 按钮宽度 */
            height: 17px; /* 按钮高度 */
            margin-left: 10px;
        }
        .more img{
             width: 20px; /* 按钮宽度 */
             height: 17px; /* 按钮高度 */
         }
        .author-name:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
        /*动态标签页样式*/
        .article-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }
        .article-header {
            width: 800px;
            height: 100px;
        }
        .article-footer2 {
            display: flex;
            align-items: center;
            height: 30px;
            margin-bottom: 5px;
        }
        .author-avatar {
            width: 20px; /* 按钮宽度 */
            height: 17px; /* 按钮高度 */
            margin-right: 5px; /* 头像与文字之间的间距 */
        }
        .author-info {
            display: flex;
            align-items: center;
        }
        .author-details {
            display: flex;
            flex-direction: row;
        }
        .author-name {
            margin-left: 20px; /* 文字之间的间距 */
        }
        .publish-time{
            margin-left: 20px; /* 文字之间的间距 */
        }
        .publish-location{
            margin-left: 20px; /* 文字之间的间距 */
        }
        /*关注按钮样式设计*/
        .action-buttons {
            margin-left: 20px;
            display: flex;
            align-items: center;
        }
        .action-buttons button {
            background-color: #E9EEEC; /* 背景颜色 */
            color: black; /* 文字颜色 */
            border: none; /* 移除边框 */
            padding: 1px 2px; /* 内边距 */
            border-radius: 5px; /* 圆弧边 */
            cursor: pointer; /* 鼠标悬停样式 */
            font-size: 14px; /* 字体大小 */
            transition: background-color 0.3s; /* 平滑过渡效果 */
        }
        .action-buttons button:hover {
            background-color: #ff1e31; /* 鼠标悬停时的背景颜色 */
        }

        .follow-list_1 {
            margin-top: 10px;
            display: flex;
            align-items: center;
            width: 100%;
            height: 40px;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .follow-image-container {
            margin-right: 15px;
        }

        .follow-author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .follow-info-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column; /* 修改为列布局 */
        }

        .follow-author-details {
            display: flex;
            flex-direction: column; /* 修改为列布局 */
            align-items: flex-start; /* 对齐方式为左对齐 */
        }

        .follow-author-details .author-name {
            font-size: 15px;
            font-weight: bold;
            color: #cccccc;
        }

        .followers-count {
            font-size: 10px;
            color: #777;
            margin-top: 2px; /* 增加顶部间距 */
        }

        .follow-author-bio p {
            margin-top: 2px;
            font-size: 10px;
            color: #555;
        }

        .follow-action-buttons {
            margin-left: auto;
        }

        .follow-follow-button {
            background-color: #E9EEEC;
            color: black;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .follow-follow-button:hover {
            background-color: #ff1e31;
        }

    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-body">
        <div class="logo">
            <a href="FirstPage.html"><img src="layui/images/logo2.png" alt="Logo"></a>
        </div>
        <ul class="layui-nav left-nav layui-bg-gray" lay-filter="component-nav-left">
            <li class="layui-nav-item">
                <a href="javascript:;">首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" id="test-dropdown-demo99">学习园</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" id="test-dropdown-demo88">社团</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">热点关注</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">二手交易</a>
            </li>
        </ul>

        <div class="search-wrap">
            <div class="layui-form">
                <div class="layui-input-wrap">
                    <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
                </div>
            </div>
        </div>

        <ul class="layui-nav right-nav layui-bg-gray" lay-filter="component-nav-right">
            <li class="layui-nav-item" lay-unselect>
                <a href="myself.html">
                    <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="myself.html">个人中心</a></dd>
                    <dd><a href="myself-updateinfo.html">编辑个人信息</a></dd>
                    <dd><a href="javascript:;">我的购物车</a></dd>
                    <dd><a href="javascript:;">我要发帖</a></dd>
                    <dd><a href="javascript:;">我的寄卖品</a></dd>
                    <hr>
                    <dd style="text-align: center;"><a href="">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">历史</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" id="test-dropdown-demo100">消息<span class="layui-badge-dot"></span></a>
            </li>
        </ul>
    </div>
</div>

<div class="layui-fluid" id="LAY-component-grid-all">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-carousel" id="ID-carousel-demo-image">
                    <div carousel-item>
                        <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                        <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                        <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                        <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                        <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="grid-demo">
                <div id="one">
                    <div id="one_bt">
                        <img src="layui/images/tongzi.png">
                        <div class="one">通知公告</div>
                        <div class="one_p"><a href="test.html"><img src="layui/images/more.png"></a></div>
                    </div>
                    <marquee  width="100%" height="328px" behavior="scroll" direction="up" onMouseOut="this.start()" onMouseOver="this.stop()" >
                        <ul>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                            <li><a href="test.html">通知公告测试1，通知公告测试通知公告测试！----<span>[2023-01-02]</span></a></li>
                        </ul>
                    </marquee>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="two">
                        <div id="two_bt">
                            <img src="layui/images/toutiao.png" alt="头条图标">
                            <div class="headline">头条</div>
                        </div>
                        <div id="two_list">
                            <div class="image_container">
                                <a href="test.html"><img src="layui/images/login.jpg" alt="文章配图" class="article_image"></a>
                            </div>
                            <div class="article_info">
                                <div id="two_list_title">
                                    <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                </div>
                                <div id="two_list_nr">
                                    <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="third">
                        <div id="third_bt">
                            <div class="third_p"><a href="test.html"><img src="layui/images/more.png"></a></div>
                        </div>
                        <div class="third_list">
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>

                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="four">
                        <div id="four_bt">
                            <img src="layui/images/redian.png">
                            <div class="headline">热点</div>
                            <div class="four_p"><a href="test.html"><img src="layui/images/more.png"></a></div>
                        </div>
                        <div class="third_list">
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="five">
                        <div id="five_bt">
                            <img src="layui/images/lost.png">
                            <div class="headline">失物招领</div>
                            <div class="four_p"><a href="test.html"><img src="layui/images/more.png"></a></div>
                        </div>
                        <div class="layui-carousel" id="ID-carousel-demo-image2">
                            <div carousel-item>
                                <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                                <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                                <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                                <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                                <div><img src="layui/images/login.jpg" class="carousel-image"></div>
                            </div>
                        </div>
                        <div class="third_list">
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                            <div class="third_list_title">
                                <a href="test.html"><p>关于周波打CSGO偷背身，被反杀</p></a>
                                <a href="test.html">这里是文章的简介或者摘要信息。湿哒哒撒大大大风歌嘎嘎嘎嘎嘎嘎嘎嘎嘎</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li>关注</li>
                        <li class="layui-this">推荐</li>
                        <li>动态</li>
                        <li>校园论坛</li>
                        <li>美食</li>
                        <li>游戏</li>
                        <li>旅游</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item" id="tab-follow">
                            <!--关注-->
                        </div>
                        <div class="layui-tab-item layui-show" id="tab-recommend">
                            <!--推荐模板-->
                        </div>
                        <div class="layui-tab-item" id="tab-dynamic">
                            <!--动态模板-->
                        </div>
                        <div class="layui-tab-item" id="tab-campus-forum">
                        </div>

                        <div class="layui-tab-item" id="tab-food">美食</div>
                        <div class="layui-tab-item" id="tab-game">游戏</div>
                        <div class="layui-tab-item" id="tab-travel">旅游</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo">25%</div>
        </div>
    </div>
</div>
<!-- 推荐模板 -->
<div id="recommend-template" style="display: none;">
    <div class="list_1">
        <div class="image-container">
            <img src="{{imageSrc}}" class="article-image">
        </div>
        <div class="content-container">
            <div class="content-container-header">
                <a href="test.html"><p class="article-title">{{title}}</p></a>
                <a href="test.html" class="article-summary">{{summary}}</a>
            </div>
            <div class="article-footer1">
                <div class="like-container">
                    <button class="like-button"></button>
                    <a class="like-count">{{likeCount}}</a>
                </div>
                <div class="dislike-container">
                    <button class="dislike-button"></button>
                    <a class="dislike-count">{{dislikeCount}}</a>
                </div>
                <a href="myself.html" class="author-name">{{authorName}}</a>
                <div class="more">
                    <a href="test.html"><img src="layui/images/more.png"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 动态模板 -->
<div id="dynamic-template" style="display: none;">
    <div class="list_1">
        <div class="image-container">
            <img src="{{imageSrc}}" class="article-image">
        </div>
        <div class="content-container">
            <div class="article-content">
                <div class="article-header">
                    <a href="test.html"><p class="article-title">{{title}}</p></a>
                    <a href="test.html" class="article-summary">{{summary}}</a>
                </div>
                <div class="article-footer2">
                    <div class="author-info">
                        <img src="{{authorAvatar}}" class="author-avatar">
                        <div class="author-details">
                            <a href="myself.html" class="author-name">{{authorName}}</a>
                            <span class="publish-time">{{publishTime}}</span>
                            <span class="publish-location">{{publishLocation}}</span>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="follow-button">关注</button>
                    </div>
                    <div class="more">
                        <a href="test.html"><img src="layui/images/more.png"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 关注模板 -->
<!-- 关注模板 -->
<div id="follow-template" style="display: none;">
    <div class="follow-list_1">
        <!-- 头像 -->
        <div class="follow-image-container">
            <img src="{{authorAvatar2}}" class="follow-author-avatar">
        </div>
        <!-- 用户信息 -->
        <div class="follow-info-container">
            <div class="follow-author-details">
                <a href="myself.html" class="follow-author-name">{{authorName}}</a>
                <span class="followers-count">{{followersCount}} 粉丝</span>
                <div class="follow-author-bio">
                    <p>{{bio}}</p>
                </div>
            </div>
        </div>
        <!-- 关注按钮 -->
        <div class="follow-action-buttons">
            <button class="follow-follow-button">关注</button>
        </div>
    </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="layui/layui.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        layui.use(['form', 'carousel', 'dropdown', 'util', 'layer', 'table', 'jquery'], function() {
            var form = layui.form;
            var carousel = layui.carousel;
            var dropdown = layui.dropdown;
            var util = layui.util;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 推荐数据
            const recommendArticles = [
                {
                    imageSrc: "layui/images/login.jpg",
                    title: "推荐文章标题1",
                    summary: "这是推荐文章的摘要。保持空气流通。每天开窗通风，保持室内空气新鲜。",
                    likeCount: "8赞",
                    dislikeCount: "踩",
                    authorName: "作者：张三"
                },
                {
                    imageSrc: "layui/images/login.jpg",
                    title: "推荐文章标题2",
                    summary: "这是另一篇推荐文章的摘要。",
                    likeCount: "10赞",
                    dislikeCount: "踩",
                    authorName: "作者：李四"
                }
            ];

            // 动态数据
            const dynamicArticles = [
                {
                    imageSrc: "layui/images/login.jpg",
                    title: "动态文章标题1",
                    summary: "这是动态文章的摘要。保持空气流通。每天开窗通风，保持室内空气新鲜。",
                    authorAvatar: "layui/images/user.png",
                    authorName: "王五",
                    publishTime: "1小时前",
                    publishLocation: "广州",
                },
                {
                    imageSrc: "layui/images/login.jpg",
                    title: "动态文章标题2",
                    summary: "这是另一篇动态文章的摘要。",
                    authorAvatar: "layui/images/user.png",
                    authorName: "赵六",
                    publishTime: "昨天",
                    publishLocation: "深圳",
                }
            ];

            // 关注数据
            const followArticles = [
                {
                    authorAvatar2: "layui/images/user.png",
                    authorName: "赵六",
                    followersCount: 1220,
                    bio: "大萨达大声道",
                },
                {
                    authorAvatar2: "layui/images/user.png",
                    authorName: "钱七",
                    followersCount: 850,
                    bio: "编程爱好者",
                }
                ,
                {
                    authorAvatar2: "layui/images/user.png",
                    authorName: "周波",
                    followersCount:"1.3w",
                    bio: "编程爱好者",
                }
            ];

            // 获取推荐模板
            const recommendTemplate = document.getElementById('recommend-template').innerHTML;
            // 获取动态模板
            const dynamicTemplate = document.getElementById('dynamic-template').innerHTML;
            // 获取关注模板
            const followTemplate = document.getElementById('follow-template').innerHTML;

            // 初始化推荐标签页的数据
            generateArticlesForTab('tab-recommend', recommendArticles, recommendTemplate);

            // 标签页切换事件
            $('.layui-tab-title li').on('click', function() {
                const tabText = $(this).text();
                let tabId = '';
                let dataToUse = [];
                let templateToUse = '';

                if (tabText === '推荐') {
                    tabId = 'tab-recommend';
                    dataToUse = recommendArticles;
                    templateToUse = recommendTemplate;
                } else if (tabText === '动态') {
                    tabId = 'tab-dynamic';
                    dataToUse = dynamicArticles;
                    templateToUse = dynamicTemplate;
                } else if (tabText === "关注") {
                    tabId = 'tab-follow';
                    dataToUse = followArticles;
                    templateToUse = followTemplate;
                }

                generateArticlesForTab(tabId, dataToUse, templateToUse);
            });

            // 动态生成数据块
            function generateArticlesForTab(tabId, articles, template) {
                const tabContent = document.getElementById(tabId);
                tabContent.innerHTML = ''; // 清空原有内容

                articles.forEach(article => {
                    let articleHtml = template
                        .replace(/{{imageSrc}}/g, article.imageSrc || "")
                        .replace(/{{title}}/g, article.title || "")
                        .replace(/{{summary}}/g, article.summary || "")
                        .replace(/{{likeCount}}/g, article.likeCount || "")
                        .replace(/{{dislikeCount}}/g, article.dislikeCount || "")
                        .replace(/{{authorName}}/g, article.authorName || "")
                        .replace(/{{authorAvatar2}}/g, article.authorAvatar2 || "")
                        .replace(/{{followersCount}}/g, article.followersCount || "")
                        .replace(/{{bio}}/g, article.bio || "")
                        .replace(/{{authorAvatar}}/g, article.authorAvatar || "")
                        .replace(/{{publishTime}}/g, article.publishTime || "")
                        .replace(/{{publishLocation}}/g, article.publishLocation || "");

                    // 添加到数据展示区域
                    tabContent.innerHTML += articleHtml;
                });

                // 设置当前标签页为显示状态
                $('.layui-tab-item').removeClass('layui-show');
                $(`#${tabId}`).addClass('layui-show');
            }

            // 点击事件委托
            document.querySelector('.layui-tab-content').addEventListener('click', function(event) {
                const target = event.target;
                const articleFooter = target.closest('.article-footer');

                if (target.classList.contains('like-button')) {
                    handleLikeButton(target, articleFooter);
                } else if (target.classList.contains('dislike-button')) {
                    handleDislikeButton(target, articleFooter);
                }
            });
            // 处理点赞按钮点击事件
            function handleLikeButton(button, articleFooter) {
                button.classList.toggle('active');
                const likeCount = articleFooter.querySelector('.like-count');
                if (button.classList.contains('active')) {
                    let count = parseInt(likeCount.textContent.match(/\d+/)[0]);
                    likeCount.textContent = `${count + 1}赞`;
                } else {
                    let count = parseInt(likeCount.textContent.match(/\d+/)[0]);
                    likeCount.textContent = `${count - 1}赞`;
                }
                const dislikeButton = articleFooter.querySelector('.dislike-button');
                if (dislikeButton) {
                    dislikeButton.classList.remove('active');
                }
            }
            // 处理踩按钮点击事件
            function handleDislikeButton(button, articleFooter) {
                button.classList.toggle('active');
                const dislikeCount = articleFooter.querySelector('.dislike-count');
                if (button.classList.contains('active')) {
                    let count = parseInt(dislikeCount.textContent.match(/\d+/)[0]);
                    dislikeCount.textContent = `${count + 1}踩`;
                } else {
                    let count = parseInt(dislikeCount.textContent.match(/\d+/)[0]);
                    dislikeCount.textContent = `${count - 1}踩`;
                }
                const likeButton = articleFooter.querySelector('.like-button');
                if (likeButton) {
                    likeButton.classList.remove('active');
                }
            }

            //第一个图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '920px',
                height: '360px',
                interval: 2000
            });
            //第二个图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image2',
                width: '312.5px',
                height: '120px',
                interval: 2000
            });

            // 学习园下拉展示
            dropdown.render({
                elem: '#test-dropdown-demo99',
                data: [{
                    title: '学校图书馆',
                    id: 100,
                    href: '#'
                }, {
                    title: '自习室',
                    id: 101,
                    href: '/',
                    target: '_blank'
                }, {
                    type: '-'
                }, {
                    title: '复习资料',
                    id: 102,
                    isSpreadItem: false,
                    type: 'group',
                    child: [{
                        title: '考研复习资料',
                        id: 103
                    }, {
                        title: '期末复习资料',
                        id: 104,
                        child: [{
                            title: '大一',
                            id: 105
                        }, {
                            title: '大二',
                            id: 11
                        }, {
                            title: '大三',
                            id: 11111
                        }]
                    }]
                }, {
                    type: '-'
                }, {
                    title: '毕业设计资料',
                    id: 4
                }, {
                    title: '竞赛资料',
                    id: 5,
                    child: [{
                        title: '计算机',
                        id: 55,
                        child: [{
                            title: '互联网+',
                            id: 5555
                        }, {
                            title: '计算机设计大赛',
                            id: 55555
                        }, {
                            title: '华为设计',
                            id: 555555
                        }]
                    }, {
                        title: '数字媒体',
                        id: 52
                    }, {
                        title: '物联网',
                        id: 53
                    }]
                }, {
                    type: '-'
                }, {
                    title: '电子资源',
                    id: 66,
                    type: 'group',
                    isSpreadItem: false,
                    child: [{
                        title: '电子资源导航',
                        id: 888
                    }, {
                        title: '最新电子资源',
                        id: 8888
                    }]
                }],
                click: function(item) {
                    layer.msg(util.escape(JSON.stringify(item)));
                }
            });

            // 消息下拉展示
            dropdown.render({
                elem: '#test-dropdown-demo100',
                data: [{
                    title: '评论',
                    templet: '<i class="layui-icon layui-icon-picture"></i> {{d.title}} <span class="layui-badge-dot"></span>',
                    id: 100,
                    href: '#'
                }, {
                    title: '点赞',
                    templet: '<img src="https://unpkg.com/outeres/demo/layer.png" style="width: 16px;"> {{d.title}}<span class="layui-badge" >&nbsp; 99+</span>',
                    id: 101,
                    href: '/',
                    target: '_blank'
                }, {
                    title: '回复',
                    templet: '<img src="https://unpkg.com/outeres/demo/layer.png" style="width: 16px;"> {{d.title}}<span class="layui-badge layui-bg-gray">1</span>',
                    id: 101,
                    href: '/',
                    target: '_blank'
                }, {
                    title: '私信',
                    id: 5,
                    templet: '<img src="https://unpkg.com/outeres/demo/layer.png" style="width: 16px;"> {{d.title}}<span class="layui-badge layui-bg-gray">1</span>',
                    href: '/',
                    target: '_blank'
                }],
                click: function(item) {
                    layer.msg(util.escape(JSON.stringify(item)));
                }
            });

            // 输入框点缀事件 - 搜索示例
            form.on('input-affix(search)', function(data) {
                var elem = data.elem; // 输入框
                var value = elem.value; // 输入框的值
                if (!value) {
                    layer.msg('请输入搜索内容');
                    return elem.focus();
                }
                // 模拟搜索跳转
                location.href = '?keywords=' + value + '&_' + new Date().getTime() + '#affix-custom';
            });
        });
    });
</script>
</body>
</html>